<template lang="html">
  <div class="developHistory">
    <mu-expansion-panel>
      <div slot="header">添加</div>
      <mu-form ref="form" :model="info">

        <mu-form-item prop="time" label="时间" :rules="rules.time" label-float>
          <mu-text-field type="text" v-model="info.time" :max-length="30"></mu-text-field>
        </mu-form-item>

        <mu-form-item prop="value" label="内容" :rules="rules.value" label-float>
          <mu-text-field type="text" v-model="info.value" :max-length="50"></mu-text-field>
        </mu-form-item>

        <mu-form-item>
          <mu-button color="primary" @click="submit">保存</mu-button>
        </mu-form-item>

      </mu-form>
    </mu-expansion-panel>

    <mu-data-table stripe border :columns="columns" :loading="loading" :sort.sync="sort" @sort-change="handleSortChange" :data="listDatas">
      <template slot-scope="scope">
        <td @click="update('update', scope, 'number')">{{scope.row.number}}</td>
        <td @click="update('is_show', scope)">{{scope.row.is_show ? '显示中' : '隐藏中'}}</td>
        <td>{{scope.row.time}}</td>
        <td>{{scope.row.value}}</td>
        <td>
          <mu-button v-if="scope.row.is_show" color="#607d8b" @click="update('is_show', scope)">点击隐藏</mu-button>
          <mu-button v-else color="#ff9800" @click="update('is_show', scope)">点击显示</mu-button>

          <mu-button color="success" @click="update('update', scope, 'number')">修改排序</mu-button>
          <mu-button color="error" @click="update('delete', scope)">删除</mu-button>
        </td>
      </template>
    </mu-data-table>

  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {},
      rules: {
        time: [{ validate: (value) => !!value, message: '必填' }],
        value: [{ validate: (value) => !!value, message: '必填' }],
      },

      listDatas: [],
      sort: {
        name: '',
        order: 'asc'
      },

      columns: [
        { title: '显示顺序', name: 'number', sortable: true, tooltip: '越大越靠前', width: '120' },
        { title: '是否显示', name: 'is_show', sortable: true, width: '120' },
        { title: '时间', name: 'time' },
        { title: '内容', name: 'value' },
        { title: '操作', name: 'action', width: '360' },
      ],

      url: '/developHistory',

      loading: false,
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.$Toast('正在获取中')
      this.loading = true
      flyio.get(this.url).then((res) => {
        this.listDatas = res
        this.loading = false
      })
    },
    submit() {
      this.$refs.form.validate().then((result) => {
        if (result) {
          this.$Toast('正在保存')
          flyio.post(this.url, this.info).then((res) => {
            this.$Toast('保存成功')
            this.getList()
          }).catch((res) => {
            this.$Toast('系统错误', 'error')
          })
        }
      })
    },
    update(type='update', info, name=null) {
      let id = info.row.id,
          $index = info.$index

      if (type == 'delete') {
        this.$confirm('将删除 (' + info.row.time + ')', '确定要删除？').then(({result}) => {
          if (result) {
            this.$Toast('正在删除')
            Vue.delete(this.listDatas, $index)
            flyio.put(this.url, {
              id,
              name: 'delete',
            }).then((res) => {
              this.$Toast('删除完成')
            })
          }
        })
      } else if (type == 'is_show') {
        let value = !info.row.is_show
        this.listDatas[$index].is_show = value
        flyio.put(this.url, {
          id,
          name: 'is_show',
          value,
        }).then((res) => {
          this.$Toast('更新完成')
        })
      }  else {
        this.$prompt(name, '正在修改', {
          content: '排序(越大越靠前)',
          inputType: 'number',
          inputValue: info.row.number,
        }).then(({result, value}) => {
          if (result) {
            this.listDatas[$index][name] = value
            flyio.put(this.url, {
              id,
              name,
              value,
            }).then((res) => {
              this.$Toast('更新完成')
            })
          }
        })
      }
    },
    handleSortChange ({name, order}) {
      this.listDatas = this.listDatas.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
    },
  },
}
</script>

<style lang="css" scoped>
</style>
